@extends('home.layout.base')
@section('title', '个人中心')
@section('pluginstyle')
    <script src="../dist/home/js/1102.js"></script>
    <link rel="stylesheet" href="{{ url('/dist/home/css/order/qikoo_shop.css') }}">
    <link href="{{ url('/dist/home/css/order/458d9383b5f2765d.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="../dist/home/css/qikoo_user.css">
    <script>var _isindex = 0;</script>
@endsection
@section('content')
    {{--订单显示--}}
    <div class="mod-order-success">
        <h2>订单提交成功，还差最后一步，请尽快付款！</h2>
        <h3>请您在
            <b class="countdown">1时58分36秒</b>内完成支付，否则您的订单会自动取消</h3>
        <p>应付金额：{{ $total }}
            {{--@foreach($data as $tmp)--}}
               {{--{{ $tmp->cart_num * $tmp->cart_price}}元--}}
            {{--@endforeach--}}
            <a class="detail-btn" href="#" onclick="return false">订单详情</a></p>
        <div style="display: none;" class="order-detail">
            <p>
            </p>
            <li>订单号：{{ $number }}
                <p></p>
            </li>
        </div>
    </div>
    {{--订单显示结束--}}
    {{--支付方式--}}
    <div class="mod-order-pay">
        <h2>只差一步，快来付款哦！</h2>
        <div class="pay-block clearfix">
            <div class="pay-title">支付平台</div>
            <ul>
                <li>
                    <input name="pay-type" value="zfb" id="zfb" data-monitor="payorder_choose_zhifubao" type="radio">
                    <label for="zfb">
                        <img src="{{ url('/dist/home/images/order/t011d5167dac1712a56.png') }}"></label>
                </li>
            </ul>
        </div>
        <div class="pay-block clearfix">
            <div class="pay-title">网上银行</div>
            <ul>
                <li>
                    <input name="pay-type" value="ICBCB2C" id="ICBCB2C" data-monitor="payorder_bank_gongshang" type="radio">
                    <label for="ICBCB2C">
                        <img src="{{ url('/dist/home/images/order/t011e0ba694b93bc39f.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="CCB" id="CCB" data-monitor="payorder_bank_jianshe" type="radio">
                    <label for="CCB">
                        <img src="{{ url('/dist/home/images/order/t01f714d3c242d92244.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="ABC" id="ABC" data-monitor="payorder_bank_nongye" type="radio">
                    <label for="ABC">
                        <img src="{{ url('/dist/home/images/order/t0163decdf0dea7aadf.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="COMM" id="COMM" data-monitor="payorder_bank_jiaotong" type="radio">
                    <label for="COMM">
                        <img src="{{ url('/dist/home/images/order/t01dac80cf09f56b25c.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="BOCB2C" id="BOCB2C" data-monitor="payorder_bank_zhongguo" type="radio">
                    <label for="BOCB2C">
                        <img src="{{ url('/dist/home/images/order/t01095bc7c6d765fd94.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="CMB" id="CMB" data-monitor="payorder_bank_zhaoshang" type="radio">
                    <label for="CMB">
                        <img src="{{ url('/dist/home/images/order/t01abc8fc442d32707b.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="CITIC" id="CITIC" data-monitor="payorder_bank_zhongxin" type="radio">
                    <label for="CITIC">
                        <img src="{{ url('/dist/home/images/order/t01881c195f1d45c38d.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="SPDB" id="SPDB" data-monitor="payorder_bank_pufa" type="radio">
                    <label for="SPDB">
                        <img src="{{ url('/dist/home/images/order/t01335cafa8775f8fe9.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="CMBC" id="CMBC" data-monitor="payorder_bank_minsheng" type="radio">
                    <label for="CMBC">
                        <img src="{{ url('/dist/home/images/order/t010243b8d47200a90d.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="GDB" id="GDB" data-monitor="payorder_bank_guangfa" type="radio">
                    <label for="GDB">
                        <img src="{{ url('/dist/home/images/order/t01975aca8321cf1982.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="CIB" id="CIB" data-monitor="payorder_bank_xingye" type="radio">
                    <label for="CIB">
                        <img src="{{ url('/dist/home/images/order/t01e6216bf18a72ad8c.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="CEBBANK" id="CEBBANK" data-monitor="payorder_bank_guangda" type="radio">
                    <label for="CEBBANK">
                        <img src="{{ url('/dist/home/images/order/t0170d7d71ef0a77d11.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="PSBC-DEBIT" id="PSBC-DEBIT" data-monitor="payorder_bank_youzheng" type="radio">
                    <label for="PSBC-DEBIT">
                        <img src="{{ url('/dist/home/images/order/t0180a8bd3d7c75c9c0.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="SPABANK" id="SPABANK" data-monitor="payorder_bank_pingan" type="radio">
                    <label for="SPABANK">
                        <img src="{{ url('/dist/home/images/order/t011e650636adb8ca10.png') }}"></label>
                </li>
                <li>
                    <input name="pay-type" value="BJBANK" id="BJBANK" data-monitor="payorder_bank_beijing" type="radio">
                    <label for="BJBANK">
                        <img src="{{ url('/dist/home/images/order/t0121af542ddf308b35.png') }}"></label>
                </li>
            </ul>
        </div>
        <div class="pay-console">
            <p class="console-info clearfix">待支付总额：
                <b>¥{{ $total }}</b>
                <a href="{{ url('/confirm/success') }}"   title="去付款"><img src="{{ url('/dist/home/images/gotopay.jpg') }}" alt=""></a>
            </p>
            <p class="console-tip">请在
                <b class="countdown">1时58分36秒</b>内完成支付</p></div>
    </div>
    {{--支付方式结束--}}
    <script>
        var orderSuccess = (function() {
            var interval, pageRemain, token, orderId;
            var now = new Date();

            var initDetailBtn = function() {
                $('.detail-btn').click(function() {
                    $(this).toggleClass('detail-show').text(function(i, txt) {
                        return '收起详情订单详情'.replace(txt, '');
                    });
                    $('.order-detail').toggle();
                })
            }

            var initCountdown = function() {
                interval = setInterval(function() {
                            countdown();
                        },
                        1000);
                countdown();
            }

            var countdown = function() {
                var timeRemain = pageRemain - (new Date() - now) / 1000;
                // console.log(timeRemain)
                if (timeRemain > 0) {
                    var hour = Math.floor(timeRemain / 60 / 60);
                    var minute = Math.floor(timeRemain / 60 % 60);
                    var second = Math.floor(timeRemain % 60);

                    $('.countdown').html(hour + '时' + minute + '分' + second + '秒');
                } else {
                    clearInterval(interval);
                    // window.location.href = '/user/myorder'
                }
            }

//            var initPayAction = function() {
//                $('#gotopay').click(function() {
//                    var type = $('[name=pay-type]:checked').val();
//                    if (type) {
//                        showPayDialog();
//                        window.open('/sale/userpay?id=' + orderId + '&token=' + token + '&bank_code=' + type);
//                    } else {
//                        qikoo.dialog.alert('请选择支付方式。');
//                    }
//                })
//            }

            var showPayDialog = function() {
                var tpl = ['<div class="dialog-content" style="padding:10px;">', '<p>请您在<b class="countdown"></b>内，在新开的网上支付页面<br>完成支付，支付完成前请不要关闭该窗口</p>', '</div>', '<div class="dialog-console">', '<a class="console-btn-confirm" href="#" onclick="return false;">已完成付款</a>', '<a class="console-btn-cancel" href="#" onclick="return false;">付款遇到问题</a>', '</div>'].join('');

                qikoo.dialog.show({
                    html: tpl,
                    title: '付款提示'
                }).find('.dialog-console a').click(function() {
                    window.location.reload();
                })
            }

            var init = function(cfg) {
                cfg = cfg || {};
                pageRemain = cfg.countdown | 0;
                token = cfg.token;
                orderId = cfg.orderId;

                initDetailBtn();
                initCountdown();
                initPayAction();
            }

            return {
                init: init
            }

        })()

        orderSuccess.init({
            countdown: 7163,
            token: '5c745e8aa2e162febafc2c6d12df4a5a',
            orderId: '1619808820001000008'
        });

    </script>
    @endsection
@section('pluginscript')
<!--[if lte IE 6]>
    <script src="../dist/home/js/dd_belatedpng_0.0.8a.js"></script>
    <script>DD_belatedPNG.fix("div, ul, img, li, input, a, span, i")</script>
    <![endif]-->
    <script>$(function () {
            var i = $("#ul_order_type.order_type li");
            i.removeClass("cur,disable,enable");
            var t = "{% int($smarty.get.status)%}";
            i.each(function () {
                "" == t && (t = -1);
                var i = parseInt($(this).find("span.order_type_count").html());
                if (i > 0) {
                    $(this).addClass("enable");
                    var e = $(this).find("a");
                    $(e).attr("href", $(e).data("href")), 0 == $(this).attr("data-order_type") && $(this).find(".order_type_count").css("color", "#ff7800"), 3 == $(this).attr("data-order_type") && $(this).find(".order_type_count").css("color", "#82c92f")
                } else
                    0 == i && $(this).addClass("disable");
                t == $(this).data("status") && ($(this).removeClass("cur,disable,enable"), $(this).addClass("cur"))
            })
        }), $(function () {
            var i = 0, t = 1e3, e = null;
            $("body").mouseover(function (i) {
                e = i.target
            }), $(".order_info_click").each(function () {
                $(this).click(function () {
                    var o = this;
                    $("#wuliu").css({
                        left: $(o).position().left - 360,
                        top: $(o).position().top + 30
                    }).show(), $("#wuliu .order_info_ul").hide(), $("#wuliu .loading").show(), $.getJSON("/user/orderhis", {id: $(o).data("id")}).done(function (a) {
                        $("#wuliu .order_info_ul").html("");
                        for (var n = "", s = 0; s < a.data.length; s++)
                            n += '<li><div class="order_info_time">' + a.data[s].acceptTime + '</div><div class="order_info_text">' + a.data[s].acceptAddress + "</div></li>";
                        $("#wuliu .order_info_ul").show().html(n), $("#wuliu .loading").hide(), $("#wuliu").css({
                            left: $(o).position().left - 360,
                            top: $(o).position().top + 30
                        }).show(), $(".order_info_click").unbind("mouseleave"), $(o).mouseleave(function () {
                            clearTimeout(i), i = setTimeout(function () {
                                $("#wuliu").find(e).length > 0 ? ($("#wuliu").unbind("mouseleave"), $("#wuliu").mouseleave(function () {
                                    i = setTimeout(function () {
                                        $("#wuliu").hide()
                                    }, t)
                                })) : $("#wuliu").hide()
                            }, t)
                        })
                    })
                })
            })
        }), $(function () {
            $(".countdonw_time").each(function () {
                var i = this;
                Timer({
                    milliseconds: $(this).data("countdown_time"),
                    interval: 500,
                    immediately: !0,
                    callback: function (t, e) {
                        $(i).html(e.hours + "时" + e.minutes + "分" + e.second + "秒")
                    },
                    fnEnd: function () {
                        $(i).addClass("countdonw_time_disable"), $(".fukuan_info").hide()
                    }
                }).run()
            })
        }), $(function () {
            $(".fukuan_info").hover(function () {
                var i = this;
                $("#countdown_tip").css({left: $(i).position().left - 100, top: $(i).position().top - 70}).show()
            }, function () {
                $("#countdown_tip").hide()
            })
        }), $(".console-cancel").click(function () {
            var i = $(this);
            1 == i.attr("data-paied") ? paiedDialog(i.attr("data-id")) : qikoo.popConfirm(i, "您确定取消本订单吗？", function () {
                $.post("/user/cancelmyorder?id=" + i.attr("data-id") + "&token=4cf42b72a7e525885f2fdbd8e4e63f9c", function (i) {
                    0 == i.result ? qikoo.dialog.alert("取消订单失败:" + i.msg) : window.location.reload()
                }, "json")
            })
        });
        var paiedDialog = function (i) {
            var t = ['<div class="dialog-content">', '<div class="dialog-paied-cancel">', '<div class="cancel-reason">', "<b>取消原因：</b>", '<div class="select-input">', '<b id="reportCategory">请选择</b>', '<svg><path fill="transparent" stroke="#fff" stroke-width="2" d="M4,8L10,14L16,8"></path></svg>', '<div class="select-list">', '<a class="select-item" data-id="现在不想购买">现在不想购买</a>', '<a class="select-item" data-id="收货人信息有误">收货人信息有误</a>', '<a class="select-item" data-id="发票信息有误">发票信息有误</a>', '<a class="select-item" data-id="重复下单">重复下单</a>', '<a class="select-item" data-id="发货时间过长">发货时间过长</a>', '<a class="select-item" data-id="其它原因">其它原因</a>', "</div>", "</div>", '<div class="errtip">请填写取消原因</div>', "</div>", "<p>温馨提示：</p>", "<p>· 订单成功取消后无法恢复</p>", "<p>· 该订单已付金额将按您支付方式原路返还到您的账户</p>", "</div>", "</div>", '<div class="dialog-console clearfix_new">', '<a class="console-btn-confirm" href="#" onclick="return false;">确定取消</a>', '<a class="console-btn-cancel" href="#" onclick="return false;">暂不取消</a>', "</div>"].join(""), e = qikoo.dialog.show({
                html: t,
                title: "取消订单",
                width: 530
            });
            e.find(".select-input").click(function (i) {
                var t = $(i.target);
                t.hasClass("select-item") ? ($(this).find("b").html(t.text()), $(this).find(".select-item").removeClass("item-curr"), t.addClass("item-curr")) : setTimeout(function () {
                    $(".select-list").show()
                }, 100)
            });
            var o = !1;
            e.find(".console-btn-confirm").click(function () {
                if (!o) {
                    var t = e.find(".item-curr").text();
                    t ? (o = !0, $.post("/user/cancelmypayedorder", {
                        id: i,
                        token: "4cf42b72a7e525885f2fdbd8e4e63f9c",
                        reason: t
                    }, function (i) {
                        o = !1, 0 == i.errno ? window.location.reload() : qikoo.dialog.alert(i.errmsg)
                    }, "json")) : (e.find(".errtip").show(), e.find(".select-input").addClass("select-error").on("click", function () {
                        $(this).removeClass("select-error"), e.find(".errtip").hide()
                    }))
                }
            }), e.find(".console-btn-cancel").click(function () {
                qikoo.dialog.hide()
            }), $("body").click(function () {
                $(".select-list").hide()
            })
        };
        $(".item-comfirm-packet").click(function () {
            var i = $(this).attr("data-id");
            qikoo.dialog.confirm("如您已收到货物，请点击确定按钮。", function () {
                $.post("/user/finishmyorder", {id: i, token: "4cf42b72a7e525885f2fdbd8e4e63f9c"}, function (i) {
                    i && 0 == i.errno ? location.reload() : qikoo.dialog.alert(i.errmsg)
                }, "json")
            })
        });</script>
    <script src="../dist/home/js/ntkfstat.js" charset="utf-8"></script>
@endsection